<!DOCTYPE html>
<html>

<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="description" content="58新媒体">
    <meta name="keywords" content="58新媒体"/>
    <title>58新媒体-视频管理</title>
    <link href="../images/web.ico" rel="icon">
    <link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../lib/bootstrap/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="../css/style.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/sweetalert.css">
    <link rel="stylesheet" type="text/css" href="../plugins/weui/css/jquery-weui.css"/>
    <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css"/>
    <link href="../plugins/validator/css/bootstrapValidator.min.css" rel="stylesheet">
    <link href="../plugins/validator/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <!---让IE9以下浏览器支持响应式布局---->
    <!--[if lt IE 9]>
    <script src="../plugins/ie/html5shiv-3.7.0.js"></script>
    <script src="../plugins/ie/respond-1.3.0.min.js"></script>
    <![endif]-->
    <style>
        #content{border: 1px solid saddlebrown;padding: 16px;border-radius: 2px}
        .list {top: 15px;width: 140px;height: 40px; border:1px solid #0082E6; display:inline-block;border-radius: 2px;position: relative; line-height: 40px;}
        #file{position: absolute;opacity: 0;color:white;width: 100%;height: 100%;z-index: 100;}
        .list span{
            display: inline-block;
            text-align: center;
            width: 100%;
            line-height: 40px;
            position: absolute;
            color: #0082E6;
        }
        video{
            margin-top: 8px;
            border-radius: 4px;
        }
        ._p{
            margin: 14px;
        }
        ._p input{
            display: inline-block;
            width: 70%;
            margin-left: 6px;
        }
        ._p span{
            font-size: 15px;
        }
    </style>
</head>

<body>
<!--加载--->
<div class="loading-container">
    <div class="sk-spinner sk-spinner-wave">
        <div class="sk-rect1"></div>
        <!--此注释用于消除‘display: inline-block;’布局下标签自动生成的空白边距，请勿删除
    -->
        <div class="sk-rect2"></div>
        <!--
    -->
        <div class="sk-rect3"></div>
        <!--
    -->
        <div class="sk-rect4"></div>
        <!--
    -->
        <div class="sk-rect5"></div>
    </div>
</div>
<!--导航-->
<div class="navbar navbar-inner">
    <div class="container-fluid">
        <div class="">
            <a class="navbar-header pull-left logo" href="../../index.html">
                58新媒体管理平台
            </a>
            <div class="sidebar-collaps" id="sidebar-collapse" style="display: inline-block">
                <i class="collapse-icon glyphicon glyphicon-align-justify"></i>
            </div>
            <ul class="nav navbar-nav navbar-right navbar-custom-menu">
                <li class="dropdown">
                    <a href="#" title="警告"><i class="fa fa-exclamation-triangle"></i></a>
                </li>
                <li class="dropdown messages-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false" title="邮件"><i class="fa fa-envelope-o"></i><span
                            class="label label-success badge-s">4</span></a>
                    <ul class="dropdown-menu">
                        <li class="header">你有4封未读邮件</li>
                        <li>
                            <div class="slimScrollDiv">
                                <ul class="menu">
                                    <li>
                                        <a href="#">
                                            <div class="pull-left"><img src="../images/head-portrait/0.jpg"
                                                                        class="img-circle"></div>
                                            <h4>五大新型Python框架！
                                                <small>两小时前</small>
                                            </h4>
                                            <p>
                                                更快、更简单，更“Python化”——这就是Python生态系统中各类新型Web框架的终极诉求。在今天的文章中，我们将介绍五款面向Python的新型Web与网络框架，它能够切实提升速度表现、充分发挥突破性新特性，同时带来实现新思路的更多可行途径。</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="pull-left"><img src="../images/head-portrait/4.jpg"
                                                                        class="img-circle"></div>
                                            <h4>从传统架构到云上数据
                                                <small>昨天</small>
                                            </h4>
                                            <p>
                                                从传统的架构到云上大数据，实现了很多的转变。传统的大数据平台计算和数据一般都在一起，到云上之后计算有可能是虚拟机、有可能是容器，存储和计算是分离的。任何计算节点访问存储时都是通过高速互联网络把数据迁移到本地来。</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="pull-left"><img src="../images/head-portrait/2.jpg"
                                                                        class="img-circle"></div>
                                            <h4>Windows常见故障
                                                <small>昨天</small>
                                            </h4>
                                            <p>
                                                任何使用Windows系统的用户都碰到过各种各样的问题，其中一些次要的问题不但会引起你的烦恼，还会给你的工作效率带来负面影响。而那些主要的问题则可能会导致你的程序崩溃，且让你需要重新启动系统。</p>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="pull-left"><img src="../images/head-portrait/3.jpg"
                                                                        class="img-circle"></div>
                                            <h4>移动应用开发从何入手？
                                                <small>昨天</small>
                                            </h4>
                                            <p>
                                                移动应用的开发方式多种多样。虽然从技术层面了解混合与原生应用间的区别非常重要，但更重要的仍然是立足业务层面思考具体决策会给开发团队及客户带来哪些影响。事实上，混合与原生之争久已有之，且双方在使用体验、技术、投资回报以及业务影响等层面皆各擅胜场。</p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="footer">
                            <a href="#">查看所有邮件</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown messages-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false" title="通知"><i class="fa fa-bell-o"></i><span
                            class="label label-warning badge-s">10</span></a>
                    <ul class="dropdown-menu">
                        <li class="header">你有10条新消息</li>
                        <li>
                            <div class="slimScrollDiv">
                                <ul class="menu">
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-user-circle-o text-yellow"></i>管理员发布了新公告
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-user-o text-red"></i>您有3次登录失败的记录
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-user-o text-info"></i>Wihend刚刚成为了超级会员
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-group text-aqua"></i>新同事向您发出邀请
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fa fa-group text-green"></i>有新员工加入
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="footer">
                            <a href="#">查看所有消息</a>
                        </li>
                    </ul>
                </li>

                <li class="dropdown messages-menu">
                    <a href="#" class="dropdown-toggle animation-info" data-toggle="dropdown" role="button"
                       aria-haspopup="true" aria-expanded="false" title="消息"><i class="fa fa-commenting"></i></a>
                    <ul class="dropdown-menu">
                        <li class="header">有2位联系人给你发来了消息</li>
                        <li>
                            <div class="slimScrollDiv">
                                <ul class="menu">
                                    <li>
                                        <a href="#">
                                            <div class="pull-left"><img src="../images/head-portrait/0.jpg"
                                                                        class="img-circle"></div>
                                            <p>Divyia</p>
                                            <h5>在线
                                                <small>1小时前</small>
                                            </h5>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="pull-left"><img src="../images/head-portrait/4.jpg"
                                                                        class="img-circle"></div>
                                            <p>Johnson</p>
                                            <h5>在线
                                                <small>3小时前</small>
                                            </h5>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="dropdown messages-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false"><img src="../images/head-portrait/3.jpg" class="user-img"><span
                            class="hedden-xs"> 欢迎您，Admin</span></a>
                    <ul class="dropdown-menu user-box">
                        <li class="user-header">
                            <img src="../images/head-portrait/3.jpg" class="img-circle" height="90">
                            <!--<p>WenQian-Web前端开发者<small>2014/04-至今</small></p>-->
                        </li>
                        <li class="user-footer">
                            <div class="pull-right">
                                <a class="btn btn-default" href="../html/login.html">退出</a>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</div>

<!--主体-->
<div class="main-container container-fluid">
    <div class="page-container" style="">
        <div class="page-sidebar">
            <div class="sidebar-header-wrapper">
                <div class="form-group has-group has-transparent">
                    <input type="text" class="form-control searchinput">
                    <div class="searchhelper">搜索报告、图表、电子邮件或通知</div>
                    <span class="fa fa-search has-group-feedback"></span>
                </div>
            </div>
            <ul class="nav sidebar-menu">
                <!--首页-->
                <li class="">
                    <a href="index.html">
                        <i class="glyphicon glyphicon-home menu-icon"></i>
                        <span class="menu-text"> 首页 </span>
                    </a>
                </li>
                <li class="">
                    <a href="member.html">
                        <i class="glyphicon menu-icon fa fa-user-circle"></i>
                        <span class="menu-text"> 用户管理 </span>
                    </a>
                </li>
                <li class="">
                    <a href="#" class="menu-dropdown">
                        <i class="glyphicon menu-icon fa fa-newspaper-o"></i>
                        <span class="menu-text"> 新闻中心 </span>
                        <i class="fa fa-angle-left menu-expand"></i>
                    </a>
                    <ul class="submenu">
                        <li class="">
                            <a href="news-classification.html">
                                <span class="menu-text">新闻分类</span>
                            </a>
                        </li>
                        <li>
                            <a href="news.html">
                                <span class="menu-text">新闻中心</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="open active">
                    <a href="#" class="menu-dropdown">
                        <i class="glyphicon menu-icon fa fa-video-camera"></i>
                        <span class="menu-text"> 视频中心 </span>
                        <i class="fa fa-angle-left menu-expand"></i>
                    </a>
                    <ul class="submenu">
                        <li class="">
                            <a href="video-classification.html">
                                <span class="menu-text">视频分类</span>
                            </a>
                        </li>
                        <li class="active">
                            <a href="video.html">
                                <span class="menu-text">视频中心</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="menu-dropdown">
                        <i class="glyphicon menu-icon fa fa-shopping-cart"></i>
                        <span class="menu-text"> 商品中心 </span>
                        <i class="fa fa-angle-left menu-expand"></i>
                    </a>
                    <ul class="submenu">
                        <li>
                            <a href="shop-classification.html">
                                <span class="menu-text">商品分类</span>
                            </a>
                        </li>
                        <li>
                            <a href="shop.html">
                                <span class="menu-text">商品列表</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="forward.html">
                        <i class="glyphicon menu-icon fa fa-file-text-o"></i>
                        <span class="menu-text"> 提现打款 </span>
                    </a>
                </li>
                <li class="">
                    <a href="transfer.html">
                        <i class="glyphicon menu-icon fa fa-file-text-o"></i>
                        <span class="menu-text"> 转账 </span>
                    </a>
                </li>
                <li>
                    <a href="order.html">
                        <i class="glyphicon menu-icon fa fa-server menu-icon"></i>
                        <span class="menu-text"> 订单管理 </span>
                    </a>
                </li>
                <li>
                    <a href="#" class="menu-dropdown">
                        <i class="glyphicon menu-icon fa fa-calendar-minus-o"></i>
                        <span class="menu-text"> 任务管理 </span>
                        <i class="fa fa-angle-left menu-expand"></i>
                    </a>
                    <ul class="submenu">
                        <li>
                            <a href="taskType.html">
                                <span class="menu-text">任务类型</span>
                            </a>
                        </li>
                        <li>
                            <a href="taskScreenshots.html">
                                <span class="menu-text">任务截图</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="">
                    <a href="#" class="menu-dropdown">
                        <i class="glyphicon menu-icon fa fa-window-restore"></i>
                        <span class="menu-text"> 套餐 </span>
                        <i class="fa fa-angle-left menu-expand"></i>
                    </a>
                    <ul class="submenu">
                        <li class="">
                            <a href="meal-list.html">
                                <span class="menu-text">套餐列表</span>
                            </a>
                        </li>
                        <li class="">
                            <a href="meal-detailed.html">
                                <span class="menu-text">套餐明细</span>
                            </a>
                        </li>
                        <li class="">
                            <a href="meal-run.html">
                                <span class="menu-text">套餐管理</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="signIn.html">
                        <i class="glyphicon menu-icon fa fa-map-marker"></i>
                        <span class="menu-text"> 签到明细 </span>
                    </a>
                </li>
                <li>
                    <a href="read.html">
                        <i class="glyphicon menu-icon fa fa-book"></i>
                        <span class="menu-text"> 阅读赚钱明细 </span>
                    </a>
                </li>
                <li>
                    <a href="distribution-commission.html">
                        <i class="glyphicon menu-icon fa fa-mail-forward"></i>
                        <span class="menu-text"> 分销佣金明细 </span>
                    </a>
                </li>
                <li class="">
                    <a href="InvitationToEarn.html">
                        <i class="glyphicon menu-icon fa fa-id-badge"></i>
                        <span class="menu-text"> 邀请赚取 </span>
                    </a>
                </li>
                <li class="">
                    <a href="notice.html">
                        <i class="glyphicon menu-icon fa fa-bullhorn menu-icon"></i>
                        <span class="menu-text"> 系统公告 </span>
                    </a>
                </li>
                <li class="">
                    <a href="store-detailed.html">
                        <i class="glyphicon menu-icon fa fa-mail-forward"></i>
                        <span class="menu-text"> 商城分销明细 </span>
                    </a>
                </li>
                <!--<li class="">
                    <a href="quotaDetails.html">
                        <i class="glyphicon menu-icon fa fa-sort-amount-desc"></i>
                        <span class="menu-text"> 额度明细 </span>
                    </a>
                </li>-->
            </ul>
        </div>

        <!---page-sidebar--->

        <div class="page-wrapper">
            <div class="page-breadcrumbs">
                <ol class="breadcrumb">
                    <li><i class="fa fa-home"></i>
                        <a href="index.html">首页</a>
                    </li>
                    <li>视频管理</li>
                </ol>
            </div>
            <div class="page-header position-relative">
                <div class="header-title title-h1">视频管理</div>
            </div>

            <div class="page-body">
                <!--基本表单--->
                <div class="row">
                    <!--基本表单--->
                    <div class="col-lg-12">
                        <div class="widget">
                            <div class="widget-header">
                                <div class="widget-caption">视频管理</div>
                            </div>
                            <div class="widget-body">
                                <form id="defaultForm" method="post" class="form-horizontal" action="">
                                    <input type="hidden" id="id" name="id"/>
                                    <div class="form-group">
                                        <label class="col-lg-3 control-label">视频标题:<i class="red">*</i></label>
                                        <div class="col-lg-5">
                                            <input type="text" class="form-control" name="title" id="title"
                                                   placeholder="新闻标题"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 control-label">选择视频默认图片</label>
                                        <div class="col-lg-5">
                                            <div class="weui-uploader__bd">
                                                <div class="weui-uploader__bd">
                                                    <ul class="weui-uploader__files" id="uploaderFiles">

                                                    </ul>
                                                    <div class="weui-uploader__input-box">
                                                        <input id="uploaderInput"
                                                               class="weui-uploader__input zjxfjs_file"
                                                               name="multipartFile" type="file" accept="image/*"
                                                               multiple="" onchange="previewImage(this)">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 control-label">所属视频分类:<i class="red">*</i></label>
                                        <div class="col-lg-5">
                                            <select class="form-control" id="select1" name="videoClassificationId.classificationId">
                                                <option value="">---请选择---</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-lg-3 control-label">视频:<i class="red">*</i></label>
                                        <div class="col-lg-5">
                                            <div id="content"  >
                                                <p class="_p">
                                                    <span>选择视频： </span>
                                                    <!--文件选择按钮-->
                                                    <a class="list" href="javascript:;">
                                                        <input id="file" type="file"  accept="video/*" name="myfile" onchange="UpladFile();" /><span>选择视频</span>
                                                    </a>
                                                    <!--上传速度显示-->
                                                    <span id="time"></span>
                                                </p>
                                                <!--显示消失-->
                                                <ul class="el-upload-list el-upload-list--text" style="display:  none;">
                                                    <li tabindex="0" class="el-upload-list__item is-success" >
                                                        <a class="el-upload-list__item-name">
                                                            <i class="el-icon-document"></i><span id="videoName">food.jpeg</span>
                                                        </a>
                                                        <label class="el-upload-list__item-status-label" >
                                                            <i class="el-icon-upload-success el-icon-circle-check" ></i>
                                                        </label>
                                                        <i class="el-icon-close" onclick="del();"></i>
                                                        <i class="el-icon-close-tip"></i>
                                                    </li>
                                                </ul>

                                                <!--进度条-->
                                                <div class="el-progress el-progress--line" style="display: none;">
                                                    <div class="el-progress-bar">
                                                        <div class="el-progress-bar__outer" style="height: 6px;">
                                                            <div class="el-progress-bar__inner" style="width: 0%;">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="el-progress__text" style="font-size: 14.4px;">0%</div>
                                                </div>

                                                <!--预览框-->
                                                <div class="preview">

                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="form-group">
                                        <div class="col-lg-9 col-lg-offset-3">
                                            <button type="button" class="btn btn-primary" id="validateBtn" name="signup"
                                                    value="提交" data-loading-text="上传中请稍后..." >提交
                                            </button>
                                            <button type="reset" class="btn btn-info" id="resetBtn">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
        <!--page-wrapper--->

    </div>
</div>
<!--回到顶部--->
<a id="backTop">
    <i class="fa fa-angle-up"></i>
</a>

<script src="../lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/validator/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="../js/sweetalert-dev.js"></script>
<script src="../js/desc.js"></script>
<script type="text/javascript" src="../js/public.js"></script>
<script src="../plugins/validator/js/bootstrap-datetimepicker.min.js"></script>
<script src="../plugins/validator/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="../plugins/weui/js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script>
    // 获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    }
    var key=0;
    $(function () {
        //获取url中的targetId参数
        var id = getUrlParam('id');
        if (id != null) {
            findById();
            setTimeout(function () {
                querytype();
            },1500)
        }else{
            querytype();
        }

        // 查询信息
        function findById() {
            $('#id').val(id);
            $.ajax({
                url: website + "/VideoController/findById",
                type: "POST",
                data: {'id': id},
                success: function (data) {
                    $("#uploaderFiles").append('<li class="weui-uploader__file" onclick="removeimg(this)" style="background-image:url('+data.data.encryptedName1+')"></li>');
                    $("#title").val(data.data.title);
                    $(".preview").append("<video  controls='' autoplay='' name='media'><source src="+data.data.encryptedName+" type='video/mp4'></video>");
                    key = data.data.videoClassification.classificationId;
                },
            });
        }

    });


    $(document).ready(function () {

        // Generate a simple captcha
        function randomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        };
        $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

        $('#defaultForm').bootstrapValidator({
            //        live: 'disabled',
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                email: {
                    validators: {
                        notEmpty: {
                            message: '邮箱地址不能为空'
                        },
                        emailAddress: {
                            message: '邮箱地址无效'
                        },
                    },
                },

            }
        });


        $('#validateBtn').click(function () {
            var id = $('#id').val();
            var title=$("#title").val();
            var select1=$("#select1").val();
            var display=$(".el-upload-list").css('display');

            if (!$('#defaultForm').data('bootstrapValidator').isValid()) { //判断校检是否通过
                swal({
                    title: "验证不通过",
                    type: "warning"
                });
                return;
            }else if(title=='' || title==null){
                swal({
                    title: "请输入视频标题",
                    type: "warning"
                });
                return;
            }else if($("#uploaderFiles li").length == 0){
                swal({
                    title: "请选择需要上传的图片",
                    type: "warning"
                });
                return;
            }else if(select1==null || select1==''){
                swal({
                    title: "请选择视频分类",
                    type: "warning"
                });
                return;
            }else if(display=='none' && $(".preview video").length==0){
                swal({
                    title: "请选择需要上传的视频",
                    type: "warning"
                });
                return;
            }
            if (id !== null && "" !== id) {
                update();
            } else {
                add();
            }
            //提交动作
            /* swal({
                 title: '提交成功',
                 type: "success"
             }, function () {
                 add();
             });*/

        });
    });

    var multipartFile1=null;
    function add() {
        $('#validateBtn').button('loading');
        var title=$("#title").val();
        var select1=$("#select1").val();
        var url = website+"/VideoController/addVideo"; // 接收上传文件的后台地址
        var form = new FormData(); // FormData 对象
        form.append("multipartFile", fileObj); // 文件对象
        form.append("title", title); // 标题
        form.append("videoClassificationId", select1); // 标题
        form.append("multipartFile1", multipartFile1); // 标题
        xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
        xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
        xhr.onload  = uploadComplete; //请求完成
        xhr.onerror = uploadFailed; //请求失败
        xhr.upload.onprogress = progressFunction; //【上传进度调用方法实现】
        xhr.upload.onloadstart = function() { //上传开始执行方法
            ot = new Date().getTime(); //设置上传开始时间
            oloaded = 0; //设置上传开始时，以上传的文件大小为0
        };
        xhr.send(form); //开始上传，发送form数据

    }

    function update() {
        $('#validateBtn').button('loading');
        var title=$("#title").val();
        var select1=$("#select1").val();
        var url = website+"/VideoController/updateNews"; // 接收上传文件的后台地址
        var form = new FormData(); // FormData 对象
        var id= $("#id").val();
        form.append("multipartFile", fileObj); // 文件对象
        form.append("title", title); // 标题
        form.append("videoClassificationId", select1); // 标题
        form.append("multipartFile1", multipartFile1); // 标题
        form.append("id", id); // 标题
        xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
        xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
        xhr.onload  = uploadComplete; //请求完成
        xhr.onerror = uploadFailed; //请求失败
        xhr.upload.onprogress = progressFunction; //【上传进度调用方法实现】
        xhr.upload.onloadstart = function() { //上传开始执行方法
            ot = new Date().getTime(); //设置上传开始时间
            oloaded = 0; //设置上传开始时，以上传的文件大小为0
        };
        xhr.send(form); //开始上传，发送form数据
    }


    // 分类
    function querytype() {
        $.ajax({
            url: website+"/VideoClassificationController/queryAll",
            type: "POST",
            processData: false,
            success: function (data) {
                var options = [];
                data.data.forEach(function (obj) {
                    if (obj.classificationId === key) {
                        options.push('<option value="' + obj.classificationId + '" selected>' + obj.classificationName + '</option>');
                    } else {
                        options.push('<option value="' + obj.classificationId + '">' + obj.classificationName + '</option>');
                    }

                })
                $('#select1').append(options);
            },
        });
    }

    /*个人生活照*/
    function removeimg(obj) {
        swal({
                title: "您确定要删除吗?",
                text: "确认删除?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确认删除",
                closeOnConfirm: false
            },
            function () {
                swal({
                    title: '删除成功',
                    type: "success"
                }, function () {
                    $(obj).remove();
                });
            });
        return false;
    }

    function previewImage(file) {
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            multipartFile1=file.files[0];
            reader.onload = function (evt) {
                $(file).parent().prev().html('<li  onclick="removeimg(this)" class="weui-uploader__file" style="background-image:url('+evt.target.result+')"></li>');
            };
            reader.readAsDataURL(file.files[0]);
        }
    }



    // 视频上传

    var xhr;//异步请求对象
    var ot; //时间
    var oloaded;//大小
    var fileObj=null;
    //上传文件方法
    function UpladFile() {
        fileObj = document.getElementById("file").files[0]; // js 获取文件对象
        console.log(fileObj);
        if(fileObj.name){
            $(".el-upload-list").css("display","block");
            $(".el-upload-list li").css("border","1px solid #20a0ff");
            $("#videoName").text(fileObj.name);
        }else{
            swal({
                title: '请选择文件',
                type: "error"
            }, function() {
            });
        }
    }
    /*点击取消*/
    function del(){
        $("#file").val('');
        $(".el-upload-list").css("display","none");
    }

    //上传进度实现方法，上传过程中会频繁调用该方法
    function progressFunction(evt) {
        // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
        if(evt.lengthComputable) {
            $(".el-progress--line").css("display","block");
            /*进度条显示进度*/
            $(".el-progress-bar__inner").css("width", Math.round(evt.loaded / evt.total * 100) + "%");
            $(".el-progress__text").html(Math.round(evt.loaded / evt.total * 100)+"%");
        }

        var time = document.getElementById("time");
        var nt = new Date().getTime(); //获取当前时间
        var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差，单位为s
        ot = new Date().getTime(); //重新赋值时间，用于下次计算

        var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
        oloaded = evt.loaded; //重新赋值已上传文件大小，用以下次计算

        //上传速度计算
        var speed = perload / pertime; //单位b/s
        var bspeed = speed;
        var units = 'b/s'; //单位名称
        if(speed / 1024 > 1) {
            speed = speed / 1024;
            units = 'k/s';
        }
        if(speed / 1024 > 1) {
            speed = speed / 1024;
            units = 'M/s';
        }
        speed = speed.toFixed(1);
        //剩余时间
        var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
        time.innerHTML = '上传速度：' + speed + units + ',剩余时间：' + resttime + 's';
        if(bspeed == 0)
            time.innerHTML = '上传已取消';
    }
    //上传成功响应
    function uploadComplete(evt) {
        //服务断接收完文件返回的结果  注意返回的字符串要去掉双引号
        console.log(1111);
        if(evt.target.responseText){
            swal({
                title: '上传成功',
                type: "success"
            }, function() {
                window.location.href = "video.html";
            });
        }else{
            swal({
                title: '上传失败',
                type: "error"
            }, function() {
                window.location.href = "video.html";
            });
        }
    }
    //上传失败
    function uploadFailed(evt) {
        swal({
            title: '上传时发生错误',
            type: "error"
        }, function() {
            window.location.href = "video.html";
        });
    }

</script>

</body>

</html>